<template>
	<view class='orders'>
		<view class='search-bar'>
			<image src="/static/img/order/orders-serach.png"></image>
			<input placeholder='搜索 姓名/ 编号/ 手机号' >
		</view>
		<view class='selectbar'>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
		</view>
		<view class="list-div">
			<uni-list>
			    <!-- 垂直排列，无略缩图，主标题+副标题显示 -->
			    <uni-list-item direction="column" v-for="item in orderslist">
			        <template v-slot:header>
			            <view class="orders-number">
							<p class="orders-p"><span class="number">{{item.ordersid}}</span></p>
						</view>
			        </template>
			        <template v-slot:body>
			            <view class="uni-list-box">
			                <view class="uni-content">
			                    <view class="list-span">
									<span class="clientname">{{csdata.clientname}}</span>
									<span class="address">{{csdata.address}}</span>
									<span class="clientstatus">{{csdata.clientstatus}}</span>
								</view>
			                    <view class="">
									<span class="clientnum">{{csdata.clientnum}}</span><br/>
									<span class="ordersdate">{{csdata.ordersdate}}</span>
								</view>
			                </view>
			            </view>
			        </template>
			        <template v-slot:footer>
			            <view class="buttondiv">
			                <button class="showbutton" @click="">查看</button>
			            </view>
			        </template>
			    </uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const csdata = ref({
	ordersid: '123456789',
	clientname: '小李',
	clientnum: '客户编号',
	ordersdate: '2025-2-14',
	address: '西钓鱼台',
	clientstatus: '待跟踪客户'
});
const orderslist = ref([
	csdata.value,
	csdata.value
]);
const index = ref(1);
const department = ref('设计部门');
const array = ref([
	department.value,
	department.value
]);
const ordersload = () => {
	
}
</script>

<style>

.selectbar {
	
}
.selectbar > .picker{
	float: left;
	margin-left: 40rpx;
	height: ;
}
.selectimg {
	width: 26rpx;
	height: 26rpx;
	transform: rotate(-180deg);
}
.search-bar {
	position: relative;
	padding-left: 30rpx;
	padding-right: 20rpx;
	padding-bottom: 20rpx;
}
.search-bar > image {
	position: absolute;
	top: 10rpx;
	left: 40rpx;
	width: 50rpx;
	height: 50rpx;
}
.search-bar > input {
	padding-left: 68rpx;
	padding-right: 24rpx;
	margin-top: 30rpx;
	border: 2rpx solid #e4e4e4;
	border-radius: 12rpx;
	height: 70rpx;
	background-color: #FFFFFF;
}
.orders-number {
	position: relative;
	bottom: 24rpx;
	width: 146rpx;
	height: 35rpx;
	background-color: #FF0000;
	border-radius: 12rpx;
}
.orders-p {
	margin-top: -8rpx;
	margin-left: 6rpx;
	width: 138rpx;
	height: 28rpx;
}
.number {
	font-size: 24rpx;
	color: #FFF;
}
.list-div {
	width: 100%;
	height: 180rpx;
	position: absolute;
	top: 150rpx;
}
.search-item {
	font-size: 24rpx;
}
.list-span {
	position: relative;
	bottom: 18rpx;
}
.list-span > span {
	display: inline-block;
}
.clientname {
	font-size: 32rpx;
	color: #333;
}
.address {
	margin-left: 50rpx;
	font-size: 32rpx;
	color: #333;
}
.clientstatus {
	float: right;
	font-size: 24rpx;
	color: #F57F76;
}
.clientnum {
	font-size: 24rpx;
	color: #aeaeae;
}
.ordersdate {
	font-size: 24rpx;
	color: #aeaeae;
}
.buttondiv {
	position: absolute;
	right: 10rpx;
	bottom: 40rpx;
	display: inline-block;
	width: 110rpx;
	height: 46rpx;
}
.showbutton {
	background-color: #2191F7;
	font-size: 24rpx;
	color: #FFFFFF;
}
</style>
